<template>
  <el-dialog
    :model-value="dialogDetails"
    width="50%"
    :before-close="handleClose"
  >
    <h3>社群详情</h3>
    <el-divider />
    <div v-loading="loading" element-loading-text="Loading...">
      <el-descriptions :column="1" size="large">
        <el-descriptions-item label="社群名称：">
          {{ DetailsRow.name }}
        </el-descriptions-item>
        <el-descriptions-item label="社群封面：">
          <el-image
            v-if="DetailsRow.coverUrl"
            style="width: 120px; height: 120px; margin: 10px 5px 0 0"
            :src="DetailsRow.coverUrl"
            fit="fill"
          />
          <div v-else>暂无图片</div>
        </el-descriptions-item>
        <el-descriptions-item label="社群类型：">
          {{ DetailsRow.typeName }}
        </el-descriptions-item>
        <el-descriptions-item label="社群地点：">
          {{ DetailsRow.destName }}
        </el-descriptions-item>
        <el-descriptions-item label="社群公告：">
          {{ DetailsRow.announcement }}
        </el-descriptions-item>
        <el-descriptions-item label="社群标签：">
          <el-tag
            size="small"
            v-for="(item, index) in DetailsRow.tags"
            :key="index"
            style="margin-right: 5px"
          >
            {{ item }}
          </el-tag>
        </el-descriptions-item>

        <el-descriptions-item label="关联总群：">
          {{ DetailsRow.parentCommunityName }}
        </el-descriptions-item>
        <el-descriptions-item label="群名片模板">
          <el-tag
            size="small"
            v-for="(item, index) in DetailsRow.cardTitleTemplate"
            :key="index"
            style="margin-right: 5px"
            type="warning"
          >
            {{ item }}
          </el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <el-descriptions :column="1" size="large">
        <el-descriptions-item label="联系方式：">
          {{ DetailsRow.contact }}
        </el-descriptions-item>
        <el-descriptions-item label="社群介绍：">
          <el-input :model-value="DetailsRow.introduce" type="textarea" />
        </el-descriptions-item>
        <el-descriptions-item label="社群图片：">
          <el-image
            v-if="DetailsRow.imgUrlList"
            style="width: 120px; height: 120px; margin: 10px 5px 0 0"
            :src="DetailsRow.imgUrlList"
            fit="fill"
          />
          <div v-else>暂无图片</div>
        </el-descriptions-item>
        <el-descriptions-item label="创始人简介：">
          <el-input
            :model-value="DetailsRow.founderIntroduce"
            type="textarea"
          />
        </el-descriptions-item>
        <el-descriptions-item label="活动简介：">
          <el-input :model-value="DetailsRow.introduce" type="textarea" />
        </el-descriptions-item>
        <el-descriptions-item label="加入资格：">
          {{ DetailsRow.requirement }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, onUpdated, ref } from 'vue';
const loading = ref(true);
const emit = defineEmits(['carry', 'cancel']);

const props = defineProps({
  dialogDetails: {
    type: Boolean,
  },
  DetailsRow: {
    type: Object,
  },
});

const handleCancel = () => {
  emit('cancel');
};
const handleClose = () => {
  handleCancel();
};
onMounted(() => {});
onUpdated(() => {
  loading.value = false;
});
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  color: #afb1b3;
}
</style>
